<!--
 * @Description: 
 * @Date: 2020-12-18 15:03:42
 * @LastEditors: lother
 * @LastEditTime: 2021-01-11 18:38:09
 * @FilePath: \AccountOpening-H5\src\components\uploader.vue
-->
<template>
        <van-field  class="uploadList noBorder"
        :rules="rulesList">
        <template #input>
            <div class="between" style="width:100%">
                <div class="pors" v-show="fileLoad.length>0" v-for="(item,index) in fileLoad" :key="index">
                    <span @click="del(item)">
                        <van-icon name="cross"  />
                    </span>
                    <img :src="item" alt="" @click="HandleclickImg(index)">
                </div>
                <div class="pors" v-show="fileLoad.length<2">
                    <van-uploader :after-read="afterRead" v-model="uploader"  result-type="file"  :disabled="cardZShow" :preview-image="false" />
                    <div class="por">
                        <div>
                            <van-icon name="plus" size="30" :color="btnColor"/>
                            <p>
                                {{list['title_'+langSuff]}}
                            </p>
                        </div>
                    </div>
                    <van-loading :color="color" v-show="cardZShow" />
                </div>
                
            </div>
        </template>
    </van-field>
</template>
<script>
import { ImagePreview } from 'vant';
import { fff ,btnColor  } from '@/assets/less/global.less'
import { uploads } from '@/api/common'
export default {
    name:"k-upload",
    props:{
        val:{
            type:Array,
            default:()=>[]
        },
        list:{
            type:Object,
            default:()=>{}
        }
    },
    computed:{
        color(){
            return fff
        },
        btnColor(){
            return btnColor
        },
        langSuff(){
            return  this.$store.state.langSuff
        },
        rulesList(){
            var arr=[]
            if(this.list?.is_require){
                arr.push({ validator: this.asyncValidator,message: this.$t('login.index.5638rk3g0081')+this.list['title_'+this.langSuff]})
            }
            return arr
        }
     },
    data() {
        return {
            cardZShow:false,
            fileLoad:[],
            uploader:[]
        }
    },
    created(){
        // console.log(this.val)
        this.fileLoad = this.val ??[]
    },
    methods:{
         afterRead(file){
            this.cardZShow=true;
            this.uoloadImg(file.file)
        },
         uoloadImg(file){
            var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
        　　formData.append('file',file); //接口需要传的参数
            uploads(formData)
            .then(res=>{
                if(res.code==1){
                    this.cardZShow=false;
                    this.fileLoad.push(res.data.url);
                    this.$emit('update:val',this.fileLoad)
                }
            })
            .catch(error=>{
                this.cardZShow=false;
            })
        },
        del(item){
            var index = this.fileLoad.indexOf(item)
            if (index !== -1) {
                this.fileLoad.splice(index, 1)
            }
            this.$emit('update:val',this.fileLoad)
        },
          asyncValidator(val) {
            var bOll;
            if(this.fileLoad.length<=0){
                bOll= false
            }else{
                bOll= true
            }
            return bOll
        },
        HandleclickImg(index) {
            ImagePreview({
                images: this.fileLoad,
                startPosition: index,
            onClose() {
                // do something
            }
            });
        }
    },
    mounted(){
        console.log(this.langSuff)
    },
    watch:{
        val(val){
        this.fileLoad = val ??[]

        }
    }
}
</script>
<style lang="less" scoped>
    .uploadList{
        .between;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0.2rem;
        .pors{
            width: 46%;
            margin: 0 auto;
            background: transparent;
            height: 2.5rem;
            border: 1px dashed @btnColor;
            border-radius: 3px;
            position: relative;
            .center;
            span{
                position: absolute;
                top: -6px;
                width: 16px;
                height: 16px;
                right: -6px;
                background: rgba(0, 0, 0, 0.7);
                display: block;
                border-radius: 100%;
                .center;
                .van-icon-cross{
                    color: @fff;
                    z-index: 10;
                    font-size: 10px;
                }
            }
            >.por{
                width: 100%;
                height: 100%;
                overflow: hidden;
                text-align: center;
                .center;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
                p{
                    .size;
                }
            }
            img{
                max-width: 100%;
                max-height: 100%;
            }
            .van-loading{
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 2;
                position: absolute;
                top:0;
                left: 0;
                .center;
            }
        }
    }
</style>